<template>
  <div>
    <el-card>
    <Categoryselector @categoryChange='handelCategoryChange' :disabled='!showList'></Categoryselector>
    </el-card>
    
    <el-card>
     <div v-show='showList'>
        <el-button type="primary" icon='el-icon-plus' :disabled='!category3Id' @click='addAttr'>添加属性</el-button>
       <el-table
          style='margin-top:20px'
          :data="attrList"
          border>
          <el-table-column
            type="index"
            label="序号"
            width="150">
          </el-table-column>
           <el-table-column
            prop='attrName'
            width="200"
             label="属性名称">
          </el-table-column>
          <el-table-column
            width="500"
             label="属性值列表">
             <template v-slot='{row}'>
               <el-tag type="info" v-for='item in row.attrValueList' :key='item.id' style='margin:5px'>{{item.valueName}}</el-tag>
             </template>
          </el-table-column>
           <el-table-column
            width="150"
             label="操作">
             <template v-slot='{row}'>
                <Hintbutton title='修改属性' type="primary" icon="el-icon-edit" size="small" @click=updateAttr(row) style="margin-right:10px"></Hintbutton>
              <el-popconfirm 
              :title="`确定删除${row.attrName}吗`"
              @onConfirm='removeAttr(row.id)'
              >
                <Hintbutton title='删除属性' type="danger" icon="el-icon-delete" size="small" slot='reference'></Hintbutton>
              </el-popconfirm>
               
             </template>
          </el-table-column>
       </el-table>  
     </div>
     <div v-show='!showList'>
       <span>属性名</span>
       <el-input v-model="attr.attrName" placeholder="属性名称" style='width:300px;margin-left:10px'></el-input>
       <br>
       <br>
       <el-button type="primary" icon='el-icon-plus' @click='addAttrList' :disabled='!attr.attrName'>添加属性</el-button>
       <el-button type="info" @click='showList=true'>取消</el-button>
       <el-table
         :data="attr.attrValueList"
         style='margin:10px'
         border>
         <el-table-column
          type='index'
           label="序号"
            width="100"
            align='center'
          >
         </el-table-column>
         <el-table-column
           label="属性值名称"
          >
          <template v-slot='{row,$index}'>
            <el-input v-model="row.valueName" 
            @blur='toSpan(row,$index)' @keyup.enter.native="toSpan(row,$index)"
            placeholder="属性值名称" v-if='row.edit' :ref='$index'>{{row.valueName}}</el-input>
            <span v-else @click=toEdit(row,$index) style="width:100%;display:inline-block">{{row.valueName}}</span>
          </template>
         </el-table-column>
         <el-table-column
           prop="prop"
           label="操作"
           >
           <template v-slot='{row,$index}'>
             <el-popconfirm 
              :title="`确定删除${row.valueName}吗`"
              @onConfirm='delAttr($index)'
            >
              <el-button slot="reference" type="danger" icon='el-icon-delete'></el-button>
            </el-popconfirm>
           </template>
         </el-table-column>
       </el-table>
       <el-button type="primary" @click='saveAttr' :disabled='!attr.attrValueList.length'>保存</el-button>
       <el-button type="info" @click='showList=true'>取消</el-button>
     </div>
    </el-card>
    
  </div>
 
</template>

<script>
import cloneDeep from 'lodash/cloneDeep'
import { category } from '@/api'
export default {
  name: 'AttrList',
  data(){
    return{
      attrList:[],
      category1Id:null,
      category2Id:null,
      category3Id:null,
      showList:true,
      attr:{
        attrName:'',
        attrValueList:[]
      }
    }
  },
  methods:{
    async removeAttr(id){
      await this.$api.attr.delAttr(id)
      this.getAttrList()
    },
    async saveAttr(){
      this.attr.attrValueList.forEach(item=>delete item.edit)
        // console.log(this.attr);
     const {code}=await this.$api.attr.save(this.attr)
      // console.log(result);
      if(code===200){
        this.showList=true
        this.attr={
           attrName:'',
           attrValueList:[]
        }
        this.$message.success(`${this.attr.id ? '更新' : '添加'}属性成功`)
        this.getAttrList()
      }else{
        this.$message.error(`${this.attr.id ? '更新' : '添加'}属性失败`)
      }
      
     
    },
    delAttr(index){
      this.attr.attrValueList.splice(index,1)
    },
    addAttrList(){
      this.attr.attrValueList.push({
        valueName:'',
        attrId:this.attr.id,
        edit:true
        })
      this.$nextTick(()=>{
        this.$refs[this.attr.attrValueList.length-1].focus()
      })  
    },
    toSpan(row,index){
      if (!row.edit) return
      const {valueName} =row
      const isRepeat=this.attr.attrValueList.filter(item=>item.valueName===valueName).length===2
      if(!valueName||isRepeat){
        if(row.copyValueName){
          row.valueName=row.copyValueName
        }else{
          this.attr.attrValueList.splice(index,1)
        }
        if(isRepeat){
          this.$message.warning('名字不能重复')
        }else{
          this.$message.warning('名字必须指定')
        }
      }
      row.edit=false
    },
    toEdit(row,index){
      if(!row.hasOwnProperty('edit')){
        this.$set(row,'edit',true)
      }else{
        row.edit=true
      }
      this.$nextTick(()=>{
        this.$refs[index].focus()
      })


    },
    addAttr(){
      this.attr={
        attrName:'',
        attrValueList:[],
        categoryId:this.category3Id,
        categoryLevel:3
      }
      this.showList=false
    },
    updateAttr(row){
      /* this.attr={...row}
      this.attr.attrValueList=cloneDeep(row.attrValueList) */
      this.attr=cloneDeep(row)
      this.attr.attrValueList.forEach(item=>item.copyValueName=item.valueName)
      this.showList=false
    },
    handelCategoryChange({categoryId,level}){
      // console.log(categoryId,level);
      if(level===1){
        this.category2Id=null
        this.category3Id=null
        this.attrList=[]
        this.category1Id=categoryId
      }else if(level===2){
        this.category3Id=null
        this.attrList=[]
        this.category2Id=categoryId
      }else{
        this.category3Id=categoryId
        this.getAttrList()
      }
      

    },
    async getAttrList(){
      const{category1Id,category2Id,category3Id}=this
      const result=await this.$api.attr.getList(category1Id,category2Id,category3Id)
      this.attrList=result.data
    }
  },
  mounted(){
     // 测试代码
   /*  this.category1Id = 1
    this.category2Id = 13
    this.category3Id = 61
    this.getAttrList() */
  }
  
}
</script>

<style lang="scss" scoped>

</style>
